<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <script type="text/javascript" charset="utf-8" src="mode.js"></script>
    <script type="text/javascript" charset="utf-8" src="app.js"></script>
</head>

<body style="margin: 0px;">
    <div data-type="vbox" style="width: 100%; height: 354px; display: -webkit-box; -webkit-box-orient: vertical;">
        <div data-type="hbox" style="position: relative; width: 100%; height: 100px; display: block; -webkit-box-orient: horizontal; left: 0px;">
            <label data-type="label" style="position: relative; display: block;">Title</label>
            <input type="text" data-type="textinput" style="position: relative; display: block; width: 464px;" data-mode="{'view':['disable'],'write':['enable']}" value="title"> </div>
        <div data-type="hbox" style="position: relative; width: 100%; height: 155px; display: block; -webkit-box-orient: horizontal; left: 0px;">
            <label data-type="label" style="position: relative; display: inline-block;">Content</label>
            <textarea data-type="textarea" rows="6" cols="40" style="position: absolute; display: block; width: 489px; margin: 0px; height: 100px; left: 0px; top: 20px;" data-mode="{'view':['disable'],'write':['enable']}">Content</textarea>
        </div>
        <div data-type="hbox" style="position: relative; width: 100%; height: 100px; display: block; -webkit-box-orient: horizontal; left: 0px;">
            <button data-type="button" type="button" style="position: relative; display: block;" data-mode="{'view':['hide'],'write':['show']}" id="save">save</button>
            <button data-type="button" type="button" style="position: relative; display: block;" id="back">back</button>
            <button id="changeMode" data-type="button" type="button" style="position: relative; display: block;">Change Mode</button>
        </div>
    </div>


</body>

</html>